<template>
    <view :style="{'height':windowHeight, 'width':windowWidth,'background-color':'#F1F1F1'}">

        <scroll-view>
            <view>
                <view class="station-info-header">
                    <uni-row>
                        <uni-col :span="20">
                            <view class="row-height"> </view>
                        </uni-col>
                        <uni-col :span="4">
                            <view class="row-height" >
                                <uni-icons type="compose" color="#1989fa;" size="30" @click="navigateToUpdate()"></uni-icons>
                            </view>
                        </uni-col>
                    </uni-row>
                </view>

                <view>
                    <view>
                        <uni-row class="oneLayer">
                            <uni-col :span="24">
                                <uni-section title="台站号" type="line"></uni-section>
                            </uni-col>
                        </uni-row>
                        <view style="height:1rem"></view>
                        <uni-row class="twoLayer">
                            <uni-col :span="24">
                                <uni-list>
                                    <uni-list-item v-bind:title="repairRecord.stationCode" ></uni-list-item>
                                </uni-list>
                            </uni-col>
                        </uni-row>
                    </view>
                    <view>
                        <uni-row class="oneLayer">
                            <uni-col :span="24">
                                <uni-section title="台站名" type="line"></uni-section>
                            </uni-col>
                        </uni-row>
                        <view style="height:1rem"></view>
                        <uni-row class="twoLayer">
                            <uni-col :span="24">
                                <uni-list>
                                    <uni-list-item v-bind:title="repairRecord.stationName" ></uni-list-item>
                                </uni-list>
                            </uni-col>
                        </uni-row>
                    </view>
                    <view>
                        <uni-row class="oneLayer">
                            <uni-col :span="24">
                                <uni-section title="抢修时间" type="line"></uni-section>
                            </uni-col>
                        </uni-row>
                        <view style="height:1rem"></view>
                        <uni-row class="twoLayer">
                            <uni-col :span="24">
                                <uni-list>
                                    <uni-list-item v-bind:title="repairRecord.repairDate" ></uni-list-item>
                                </uni-list>
                            </uni-col>
                        </uni-row>
                    </view>
                    <view>
                        <uni-row class="oneLayer">
                            <uni-col :span="24">
                                <uni-section title="抢修内容" type="line"></uni-section>
                            </uni-col>
                        </uni-row>
                        <view style="height:1rem"></view>
                        <uni-row class="twoLayer">
                            <uni-col :span="24">
                                <uni-list>
                                    <uni-list-item v-bind:title="repairRecord.repairContent" ></uni-list-item>
                                </uni-list>
                            </uni-col>
                        </uni-row>
                    </view>
                    <view>
                        <uni-row class="oneLayer">
                            <uni-col :span="24">
                                <uni-section title="抢修人员" type="line"></uni-section>
                            </uni-col>
                        </uni-row>
                        <view style="height:1rem"></view>
                        <uni-row class="twoLayer">
                            <uni-col :span="24">
                                <uni-list>
                                    <view v-for="people in repairRecord.repairPeople" :key="people.text">
                                        <uni-list-item v-bind:title="people.text"></uni-list-item>
                                    </view>
                                </uni-list>
                            </uni-col>
                        </uni-row>
                    </view>
                    <view>
                        <uni-row class="oneLayer">
                            <uni-col :span="24">
                                <uni-section title="所属公司" type="line"></uni-section>
                            </uni-col>
                        </uni-row>
                        <view style="height:1rem"></view>
                        <uni-row class="twoLayer">
                            <uni-col :span="24">
                                <uni-list>
                                    <uni-list-item v-bind:title="repairRecord.repairCompany" ></uni-list-item>
                                </uni-list>
                            </uni-col>
                        </uni-row>
                    </view>
                </view>
            </view>
            <view class="station-info-footer"></view>
        </scroll-view>
    </view>

</template>

<script>
    export default {
        name: "RepairRecordInfo",
        data() {
            return {
                windowWidth: '375px',
                windowHeight: '667px',
                repairRecord: {
                    id:'',
                    stationCode: '',
                    stationName: '',
                    repairDate: '',
                    repairContent: '',
                    repairPeople: [],
                    repairCompany: ''
                }
            }
        },
        onLoad: function(options) {
            this.windowWidth = options.windowWidth
            this.windowHeight = options.windowHeight
            this.repairRecord.id = options.recordId

            this.fetchRecordInfo(this.repairRecord.id)
        },
        methods: {
            fetchRecordInfo(recordId) {
                uni.showLoading()
                this.uniRequest({
                    url: '/stations/repairRecords/' + recordId,
                    method: 'GET',
                }).then((res) => {
                    this.repairRecord = res.data
                    uni.hideLoading()
                }).catch((err) => {
                    console.log('fetchRecordInfo Error:', err)
                    uni.hideLoading()
                    uni.showToast({
                        icon: 'error',
                        title: '抢修记录详情获取失败！ ',
                        duration: 2000
                    })
                })
            },
            navigateToUpdate() {
                const updateUrl = '/pages/repair/RepairRecordUpdate?windowHeight=' + this.windowHeight + '&windowWidth=' + this.windowWidth + '&recordId=' + this.repairRecord.id + '&action=update'
                uni.navigateTo({
                    url: updateUrl,
                })
            }
        }
    }
</script>

<style scoped>

    .station-info-header {
        height: 2rem;
    }

    .station-info-footer {
        height: 2rem;
    }

    .row-height {
        height: 3rem;
    }

</style>